// 打卡组件
<template>
  <div class="onPunch">
    <div class="punchBtn" @click="toPunch()">
      <icon-svg name="dianj" class="iconBtn"></icon-svg>
      <p>点我打卡</p>
    </div>
    <div class="punchList">
      <p class="title">考勤记录</p>
      <hr />
      <div class="content">
        <div v-for="(item, index) in punchList" :key="index" class="conItem">
          <p>{{ item.clock_time }}</p>
          <p>{{ item.nick_name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      punchList: [],
    };
  },
  mounted() {
    this.getPunchList();
  },
  methods: {
    toPunch() {
      this.$http({
        url: this.$http.adornUrl("/business/eattendance/save"),
        method: "post",
        data: this.$http.adornData({
          userId: localStorage.getItem("userId"),
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1000,
          });
          this.getPunchList();
        }
      });
    },
    getPunchList() {
      this.$http({
        url: this.$http.adornUrl("/business/eattendance/query"),
        method: "get",
        params: this.$http.adornParams({
          userId: "",
          pageSize: 999,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.punchList = data.page.records;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.onPunch {
  width: 1000px;
  overflow: hidden;
  height: 500px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 #d3dce6;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  border-radius: 5px;
  .punchBtn {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(#e66465, #9198e5);
    border-radius: 100px;
    box-shadow: 0 2px 5px 0 red;
    margin-left: 150px;
    cursor: pointer;
    .iconBtn {
      display: block;
      font-size: 100px;
      margin: 30px auto 0;
    }
    p {
      color: #fff;
      text-align: center;
      margin: 0;
      font-size: 25px;
    }
    &:hover {
      transform: scale(1.1);
      transition: all 1s;
    }
  }
  .punchList {
    width: 500px;
    height: 100%;
    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .content {
      width: 100%;
      height: 80%;
      overflow: auto;
      .conItem {
        display: flex;
        width: 95%;
        justify-content: space-between;
        border-bottom: 1px dashed #000000;
      }
    }
  }
}
</style>
